<template>
    <div class="white"  style="min-height: 95vh;">
        <v-app-bar app elevation="0" dense color="white">
            <v-btn icon @click="$router.go(-1)">
                <v-icon>mdi-arrow-left</v-icon>
            </v-btn>
            <v-toolbar-title class="text-center flex-grow-1 subtitle-1">{{appTitle}}</v-toolbar-title>

            <v-btn plain text :ripple="false">
            </v-btn>
        </v-app-bar>

        <v-container>
            <v-row class="pa-4 grey lighten-3 rounded-lg" dense>
                <v-col cols="12" class="d-flex align-center" >
                    <span class="subtitle-1">余额</span>
                    <v-spacer></v-spacer>
                    <span class="text-h5 mr-1 font-weight-medium primary--text">{{totalTicket}}</span>
                    <sub class="text-caption">金币</sub>
                </v-col>
            </v-row>
        </v-container>

        <v-container class="pt-0">
            <v-chip-group mandatory v-model="productId" active-class="primary--text primary--border">
                <v-row dense no-gutters>
                    <v-col cols="4" v-for="item of items" :key="item.id">
                        <v-chip outlined label large :value="item.id">
                            <span>{{item.price}}</span><span class="text-caption">元</span>
                            <span>/</span>
                            <span>{{item.ticket}}</span><span class="text-caption">次</span>
                        </v-chip>
                    </v-col>
                </v-row>
            </v-chip-group>
            <v-radio-group v-model="payMethod"  mandatory  class="mt-8">
                <v-row dense>
                    <v-col cols="12" class="d-flex align-center" >
                        <span @click="payMethod = 600">¥600充值600金币</span>
                        <v-spacer></v-spacer>
                        <v-radio value="600"></v-radio>
                    </v-col>
                    <v-col cols="12" class="d-flex align-center" >
                        <span @click="payMethod = 1000">¥1000充值1100金币</span>
                        <v-spacer></v-spacer>
                        <v-radio value="1000"></v-radio>
                    </v-col>
                    <v-col cols="12" class="d-flex align-center" >
                        <span @click="payMethod = 2000">¥2000充值2400金币</span>
                        <v-spacer></v-spacer>
                        <v-radio value="2000"></v-radio>
                    </v-col>
                    <v-col cols="12" class="d-flex align-center" >
                        <span @click="payMethod = 5000">¥5000充值6000金币</span>
                        <v-spacer></v-spacer>
                        <v-radio value="5000"></v-radio>
                    </v-col>
                    <v-col cols="12" class="d-flex align-center" >
                        <span @click="payMethod = 'custom'">自定义金额</span>
                        <!--                        <sub class="text&#45;&#45;disabled">目前暂未开放充值渠道,请联系管理员手动充值</sub>-->
                        <v-spacer></v-spacer>
                        <v-radio value="custom"></v-radio>
                    </v-col>

                    <!--                    <v-col cols="12" class="d-flex align-center" >-->
                    <!--                        <sub class="text&#45;&#45;disabled">目前暂未开放充值渠道,请联系管理员手动充值</sub>-->
                    <!--                        <v-spacer></v-spacer>-->
                    <!--                        <v-radio value="custom"></v-radio>-->
                    <!--                    </v-col>-->
                </v-row>
            </v-radio-group>
            <v-text-field
                v-if="payMethod === 'custom'"
                v-model="amount"
                label="金额不能小于600"
                :rules="[rules.required, rules.isdigit, rules.minValue,rules.inputRules]"
                type="number"
                append-icon="mdi-currency-cny"
            ></v-text-field>

            <v-btn block rounded large
                   depressed
                   color="primary"
                   class="mt-8"
                   :loading="saving"
                   @click="createOrder"
            >立即充值</v-btn>
        </v-container>

        <v-dialog v-model="confirmBalance" max-width="400px">
            <v-card>
                <v-card-title>该操作将会产生充值费用，是否继续?</v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn depressed @click="confirmBalance = false">取消</v-btn>
                    <v-btn depressed color="error" @click="createOrderBybalance" :loading="saving">确定</v-btn>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-dialog>


    </div>
</template>

<script>
import axios from "axios";
import {mapGetters} from 'vuex';
import QRCode from "qrcode";

export default {
    data: () => ({
        wechatDialog: false,
        payList: [],
        qrCodeUrl: '',
        loading: false,
        saving: false,
        totalTicket: 0,
        freeMoney: 0,
        productId: 0,
        payMethod: 'accountpay',
        items: [],
        customAmount: null,
        rules: {
            required: value => !!value || '此项为必填项',
            isdigit: value => /^\d+$/.test(value) || '请输入有效的数字',
            minValue: value => value > 600 || '自定义金额必须大于600元',
            inputRules: value => {
                console.log(value)
                // 使用正则表达式检查输入是否为数字
                const pattern = /^[0-9]+$/;
                if (pattern.test(value)) {
                    return true;
                }
                return '输入必须为整数';
            },

        },
        amount: 0,
        confirmBalance: false
    }),
    computed: {
        appTitle() {
            return "金币充值";
        },
        ...mapGetters([
            'uid'
        ]),
    },
    created() {
        this.getPayMent();
        this.load();
        this.loadProduct();
    },
    methods: {
        getPayMent(){
            axios.get(`/v1/payment/type_list`)
                .then((response) => {
                    if(response && response.data && response.data.code == 200){
                        this.payList = response.data.data
                    }
                })
        },
        createOrderBybalance(){
            if (this.payMethod == 'custom') {
                this.payMethod = this.amount
            }
            if (this.payMethod < 600) {
                this.$toasted.show("金额不能小于600", {type: "error"});
                return
            }
            if (!this.checkString(this.payMethod)) {
                this.$toasted.show("输入必须为整数", {type: "error"});
                return
            }
            if(this.payList.length >= 2){

            }else {
                console.log('this.payList',this.payList)
                if(this.payList[0]['model'] == 'wechat'){
                    this.pay_wechat()
                }
                if(this.payList[0]['model'] == 'sqb'){
                    this.pay_sqb()
                }
            }
        },
        pay_sqb() {
            this.$router.push({ path: `/user/sqb` });
        },
        pay_wechat() {
            const that = this;
            that.saving = true;
            axios.post(`/v1/wechat/payment/native`, {payMethod: that.payMethod})
                .then((response) => {
                    if(response && response.data && response.data.code == 200){
                        const dataToSend = {
                            qrCodeUrl: response.data.data.url,
                            orderNo: response.data.data.order_no
                        };
                        this.$router.push({ path: `/user/wechart`,query: dataToSend });
                    }
                })
                .catch(function () {
                })
                .then(function () {
                    that.saving = false;
                });
        },
        load() {
            const that = this;
            that.loading = true;
            axios.get(`/v1/user/money`).then((response) => {
                if (response.data.code == 0) {
                    that.totalTicket = response.data.data.ticket;
                    that.freeMoney = response.data.data.free_money;
                } else {
                    that.$toasted.show(response.data.msg, {type: "error"});
                }
            })
                .catch(function () {
                })
                .then(function () {
                    that.loading = false;
                });
        },
        loadProduct() {
            const that = this;
            axios.get(`/v1/user/deposit/product`).then((response) => {
                if (response.data.code == 0) {
                    that.items = response.data.data.items;
                } else {
                    that.$toasted.show(response.data.msg, {type: "error"});
                }
            })
                .catch(function () {
                })
                .then(function () {
                });
        },

        createOrder() {
            this.confirmBalance = true;
        },
        checkString(inputString) {
            const isAllDigits = [...inputString].every(char => !isNaN(parseInt(char, 10)));
            this.hasNonDigit = !isAllDigits;
            if (this.hasNonDigit) {
                return false
            } else {
                return true
            }
        }

    }
};
</script>
